<template>
    <div class="cone">
        <div class="cone-base"></div>
        <div class="cone-body"></div>
        <div class="cone-top"></div>
    </div>
</template>
<script>
export default {};
</script>
<style  lang='less' scoped>
.cone {
    position: relative;
    width: 100px;
    height: 100px;
    perspective: 800px;
}

.cone-base {
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    background-color: #f8f9fa;
    border-radius: 50% 50% 0 0;
}

.cone-body {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateY(90deg);
    background-color: #4caf50;
    border-radius: 50% 50% 75% 75%;
    transition: transform 0.5s ease-in-out;
}

.cone-top {
    position: absolute;
    width: 100%;
    height: 0;
    padding-top: 75%;
    background-color: #fff;
    border-radius: 50% 50% 75% 75%;
    transform: rotateY(90deg);
    transition: transform 0.5s ease-in-out;
}

.cone:hover .cone-body {
    transform: rotateY(180deg);
}

.cone:hover .cone-top {
    transform: rotateY(0deg);
}
</style>